<template>
  <div>
    <el-form style="width: 50%">
      <el-form-item label="旧密码">
        <el-input type="password" v-model="oldPassword"></el-input>
      </el-form-item>
      <el-form-item label="新密码">
        <el-input type="password" v-model="newPassword"></el-input>
      </el-form-item>
      <el-form-item label="确认密码">
        <el-input type="password" v-model="rePassword"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm()">提交</el-button>
        <el-button @click="resetForm()">重置</el-button>
      </el-form-item>
    </el-form>

  </div>
</template>

<script>
export default {
  data() {
    return {
      oldPassword: "",
      newPassword: "",
      rePassword: ""
    };
  },
  methods: {
    submitForm: function () {
      // 不能有空
      if (this.oldPassword === '' || this.newPassword === '' || this.rePassword === '') {
        this.$message({message: "请输入完整", type: "error"});
        return;
      }
      // 验证两次密码是否一致
      if (this.newPassword !== this.rePassword) {
        this.$message({message: "两次密码不一致", type: "error"});
        return;
      }
      // 发送请求
      this.$http({
        method: "POST",
        url: "/user/password",
        params: {password: this.oldPassword, newPassword: this.newPassword}
      }).then(response => {
        if (response.data.code === 0) {
          this.$alert(response.data.msg + ",重新登录", '确认', {
            confirmButtonText: '确定',
            callback: () => {
              this.$router.push('/login');
            }
          });

        } else {
          this.$message({
            message: response.data.msg,
            type: "error"
          });
        }
      })
    },
    resetForm: function () {
      this.oldPassword = '';
      this.newPassword = '';
      this.rePassword = '';
    }
  },
  mounted() {
  }
};
</script>
